<style lang="less">
  @import '../styles/common.less';
  @import '../tables/components/table.less';
  @import './style/answer.less';
</style>

<template>
  <div class="answer-list answer-list-div-user">
    <div v-for="el in data" class="border-top">
      <div class="user">
        <table class="table-user" cellpadding="0" cellspacing="0">
          <tr>
            <td class="td1">
              <img class="cursor" :src="el.user.thumb" alt="头像" v-if="el.user && el.user.thumb"
                   @click="searchUserInfo(el.user.id)">
              <img class="cursor" src="/vendors/images/person.png" alt="头像" v-if="!(el.user && el.user.thumb)"
                   @click="searchUserInfo(el.user.id)">
            </td>
            <td class="td2">
              <div class="name" v-text="el.user.name"></div>
            </td>
            <td class="td3">
              <div class="time" v-text="el.create_time"></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="content cursor" v-html="el.content" @click="showDetail(el.id)"></div>
      <div class="action-button-div">
        <div class="action"
             v-if="el.subject && el.subject.praise">
          <div class="support" @click="supportFun(el.id, el.subject.praise.is_support)">
            <Icon type="ios-thumbs-up"
                  v-if="el.subject.praise.is_support.toString() == 'true' && el.subject.praise.is_support.toString() != ''"/>
            <Icon type="ios-thumbs-up-outline"
                  v-if="el.subject.praise.is_support.toString() == 'false' || el.subject.praise.is_support.toString() == ''"/>
            {{el.subject.praise.support}}
          </div>
          <div class="against" @click="againstFun(el.id, el.subject.praise.is_support)">
            <Icon type="ios-thumbs-down"
                  v-if="el.subject.praise.is_support.toString() == 'false' && el.subject.praise.is_support.toString() != ''"/>
            <Icon type="ios-thumbs-down-outline"
                  v-if="el.subject.praise.is_support.toString() == 'true' || el.subject.praise.is_support.toString() == ''"/>
            {{el.subject.praise.against}}
          </div>
          <div class="comments" @click="commentsFun(el.id)">
            <Icon type="ios-text-outline"/>
            <span
              v-if="el.show_comments_list != true">评论({{el.subject.reply.reply_number > 0 ? el.subject.reply.reply_number : 0}})</span>
            <span v-if="el.show_comments_list == true">收起评论</span>
          </div>
          <div class="collection"
               @click="collectionFun(el.id, el.subject.collection.is_collection)">
            <Icon type="ios-star" v-if="el.subject.collection.is_collection.toString() == 'true'"/>
            <Icon type="ios-star-outline"
                  v-if="el.subject.collection.is_collection.toString() == 'false'"/>
            收藏({{el.subject.collection.collection_number > 0 ? el.subject.collection.collection_number : 0}})
          </div>
        </div>
      </div>
      <div class="comments-list comments-list-div" v-if="el.show_comments_list == true">
        <comments-list
          reply_type="answer"
          :reply_type_id="el.id"
        ></comments-list>
      </div>
    </div>
    <div class="page" v-if="total > 0">
      <Page :total="total" :current="page" size="small" @on-change="changePage" show-elevator></Page>
    </div>
    <!--详情-->
    <Drawer :closable="false" :width="DrawerWidth" v-model="showCurrentTableData" class="Drawer-body">
      <div class="Drawer_pStyle">
        <span></span>
        <span class="del" @click="asyncOK"><Button type="error" size="small" icon="md-close"></Button></span>
      </div>
      <div class="body padding-16">
        <div class="answer-list-div-user">
          <div class="user">
            <table class="table-user" cellpadding="0" cellspacing="0">
              <tr>
                <td class="td1">
                  <img class="cursor" :src="dataDetail.user.thumb" alt="头像"
                       v-if="dataDetail.user && dataDetail.user.thumb" @click="searchUserInfo(dataDetail.user.id)">
                  <img class="cursor" src="/vendors/images/person.png" alt="头像"
                       v-if="!(dataDetail.user && dataDetail.user.thumb)" @click="searchUserInfo(dataDetail.user.id)">
                </td>
                <td class="td2">
                  <div class="name" v-text="dataDetail.user ? dataDetail.user.name : ''"></div>
                </td>
                <td class="td3">
                  <div class="time" v-text="dataDetail.create_time"></div>
                </td>
              </tr>
            </table>
          </div>
          <div class="content ck-editor-content" v-html="dataDetail.content"></div>
          <div class="action-button-div">
            <div class="action"
                 v-if="dataDetail.subject && dataDetail.subject.praise">
              <div class="support" @click="supportFun(dataDetail.id, dataDetail.subject.praise.is_support)">
                <Icon type="ios-thumbs-up"
                      v-if="dataDetail.subject.praise.is_support.toString() == 'true' && dataDetail.subject.praise.is_support.toString() != ''"/>
                <Icon type="ios-thumbs-up-outline"
                      v-if="dataDetail.subject.praise.is_support.toString() == 'false' || dataDetail.subject.praise.is_support.toString() == ''"/>
                {{dataDetail.subject.praise.support}}
              </div>
              <div class="against" @click="againstFun(dataDetail.id, dataDetail.subject.praise.is_support)">
                <Icon type="ios-thumbs-down"
                      v-if="dataDetail.subject.praise.is_support.toString() == 'false' && dataDetail.subject.praise.is_support.toString() != ''"/>
                <Icon type="ios-thumbs-down-outline"
                      v-if="dataDetail.subject.praise.is_support.toString() == 'true' || dataDetail.subject.praise.is_support.toString() == ''"/>
                {{dataDetail.subject.praise.against}}
              </div>
              <div class="comments" @click="commentsFun(dataDetail.id)">
                <Icon type="ios-text-outline"/>
                <span
                  v-if="dataDetail.show_comments_list != true">评论({{dataDetail.subject.reply.reply_number > 0 ? dataDetail.subject.reply.reply_number : 0}})</span>
                <span v-if="dataDetail.show_comments_list == true">收起评论</span>
              </div>
              <div class="collection"
                   @click="collectionFun(dataDetail.id, dataDetail.subject.collection.is_collection)">
                <Icon type="ios-star" v-if="dataDetail.subject.collection.is_collection.toString() == 'true'"/>
                <Icon type="ios-star-outline"
                      v-if="dataDetail.subject.collection.is_collection.toString() == 'false'"/>
                收藏({{dataDetail.subject.collection.collection_number > 0 ? dataDetail.subject.collection.collection_number : 0}})
              </div>
            </div>
          </div>
          <div class="comments-list comments-list-div" v-if="dataDetail.show_comments_list == true">
            <comments-list
              reply_type="answer"
              :reply_type_id="dataDetail.id"
            ></comments-list>
          </div>
        </div>
      </div>
      <div class="footer" :style="{width: DrawerWidth - 32 + 'px'}">

      </div>
    </Drawer>
    <!--收藏-->
    <Modal v-model="show_collection_modal" :width="600"
           class-name="vertical-center-modal" class="Modal-Detail-div">
      <h3 slot="header" style="color:#2D8CF0">收藏</h3>
      <div class="collection-div">
        <CheckboxGroup v-model="Checkbox_collection_group" class="Checkbox">
          <Checkbox v-for="(el,index) in collection_group_data" :key="index" :label="el.id">
            <span v-text="el.name"></span>
          </Checkbox>
        </CheckboxGroup>
      </div>
      <div slot="footer">
        <Button type="text" @click="hidecollectionModal">取消</Button>
        <Button type="primary" :loading="saveLoading" @click="savecollection()">确定</Button>
      </div>
    </Modal>
    <!--人员详情-->
    <user-info
      :user_id="userInfo_id"
      @userInfoBackFun="userInfoBackFun"
    ></user-info>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  import commentsList from '../components/comments-list.vue';
  import userAvatar from '../components/user-avatar.vue';
  import userInfo from '../components/user-info.vue';
  export default {
    name: 'answer_list',
    props: ['answer_type', 'answer_type_id'],
    components: {
      commentsList,
      userAvatar,
      userInfo
    },
    data () {
      return {
        type: '',
        type_id: '',
        uid: Util.toJson(localStorage.getItem('userInfo')).id,
        total: 0,
        page: 1,
        size: 10,
        total_second: 0,
        page_second: 1,
        id: '',
        data: {},
        dataDetail: {},
        data_second: {},
        content: '',
        reply_content: '',
        saveLoading: false,
        showCurrentTableData: false,
        dialogue_rid: '',
        support: false,
        against: false,
        supportNum: 0,
        againstNum: 0,
        list_tid: '',//收藏内容id
        list_is_collection: '',//是否收藏了
        show_collection_modal: false,
        collection_group_data: [],
        Radio_collection_group: '',
        Checkbox_collection_group: [],
        DrawerWidth: Util.constant.DrawerWidth,// 抽屉的宽度
        WindowWidth: Util.constant.WindowWidth,// 窗口的宽度
        WindowHeight: Util.constant.WindowHeight,// 窗口的高度
        userInfo_id: '',// 查看用户详情的用户id
      };
    },
    created: function () {
      var _this = this;
      _this.type = _this.answer_type;
      _this.type_id = _this.answer_type_id;
      _this.get_list();
    },
    watch: {
      answer_type_id: function () {
        var _this = this;
        _this.type = _this.answer_type;
        _this.type_id = _this.answer_type_id;
        _this.get_list();
      }
    },
    mounted () {
      var _this = this;
    },
    methods: {
      // 查看用户详情
      searchUserInfo: function (id) {
        var _this = this;
        _this.userInfo_id = id;
      },
      userInfoBackFun: function (id) {
        var _this = this;
        _this.userInfo_id = id;
      },
      get_list: function () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          page: _this.page,
          size: _this.size,
          sort: 'create_time',
          knowledge_id: _this.type_id,
        };
        var params = {
          url: '/intell-lib/answer/list',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.total = res.rows;
            var dataObj = {};
            for (var k in _data) {
              if (!_data[k]) {
                continue;
              }
              var id = _data[k].id;
              var key = 'answer_key_' + _this.type + '_' + id;
              if (!dataObj[key]) {
                dataObj[key] = {};
              }
              _data[k].show_comments_list = false;
              dataObj[key] = _data[k];
            }
            _this.data = dataObj;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询回答列表失败!');
          }
        }
      },
      // 翻页
      changePage: function (page) {
        var _this = this;
        _this.page = page;
        _this.get_list();
      },
      // 支持
      supportFun: function (tid, is_support) {
        var _this = this;
        is_support = is_support.toString();
        if (is_support == 'true' && is_support != '') {//已经支持 -> 取消支持
          _this.supportSave(tid, 'answer', '', true, function (res) {
            if (res.result == 0) {
              var key = 'answer_key_' + _this.type + '_' + tid;
              _this.data[key].subject.praise.support = _this.data[key].subject.praise.support - 1 >= 0 ? _this.data[key].subject.praise.support - 1 : 0;
              _this.data[key].subject.praise.is_support = '';
              if (_this.showCurrentTableData == true) {
                _this.dataDetail.subject.praise.support = _this.dataDetail.subject.praise.support - 1 >= 0 ? _this.dataDetail.subject.praise.support - 1 : 0;
                _this.dataDetail.subject.praise.is_support = '';
              }
            } else {
              _this.$Message.destroy();
              _this.$Message.error('保存信息失败!');
            }
          });
        } else if (is_support == 'false' && is_support != '') {//已经反对 -> 变为支持
          _this.supportSave(tid, 'answer', true, false, function (res) {
            if (res.result == 0) {
              var key = 'answer_key_' + _this.type + '_' + tid;
              _this.data[key].subject.praise.support = _this.data[key].subject.praise.support + 1;
              _this.data[key].subject.praise.against = _this.data[key].subject.praise.against - 1 >= 0 ? _this.data[key].subject.praise.against - 1 : 0;
              _this.data[key].subject.praise.is_support = true;
              if (_this.showCurrentTableData == true) {
                _this.dataDetail.subject.praise.support = _this.dataDetail.subject.praise.support + 1;
                _this.dataDetail.subject.praise.against = _this.dataDetail.subject.praise.against - 1 >= 0 ? _this.dataDetail.subject.praise.against - 1 : 0;
                _this.dataDetail.subject.praise.is_support = true;
              }
            } else {
              _this.$Message.destroy();
              _this.$Message.error('保存信息失败!');
            }
          });
        } else if (is_support == '' && is_support != 'false' && is_support != 'true') {//未支持未反对 -> 支持
          _this.supportSave(tid, 'answer', true, false, function (res) {
            if (res.result == 0) {
              var key = 'answer_key_' + _this.type + '_' + tid;
              _this.data[key].subject.praise.support = _this.data[key].subject.praise.support + 1;
              _this.data[key].subject.praise.is_support = true;
              if (_this.showCurrentTableData == true) {
                _this.dataDetail.subject.praise.support = _this.dataDetail.subject.praise.support + 1;
                _this.dataDetail.subject.praise.is_support = true;
              }
            } else {
              _this.$Message.destroy();
              _this.$Message.error('保存信息失败!');
            }
          });
        }
      },
      // 反对
      againstFun: function (tid, is_support) {
        var _this = this;
        is_support = is_support.toString();
        if (is_support == 'true' && is_support != '') {//已经支持 -> 变为反对
          _this.supportSave(tid, 'answer', false, false, function (res) {
            if (res.result == 0) {
              var key = 'answer_key_' + _this.type + '_' + tid;
              _this.data[key].subject.praise.support = _this.data[key].subject.praise.support - 1 >= 0 ? _this.data[key].subject.praise.support - 1 : 0;
              _this.data[key].subject.praise.against = _this.data[key].subject.praise.against + 1;
              _this.data[key].subject.praise.is_support = false;
              if (_this.showCurrentTableData == true) {
                _this.dataDetail.subject.praise.support = _this.dataDetail.subject.praise.support - 1 >= 0 ? _this.dataDetail.subject.praise.support - 1 : 0;
                _this.dataDetail.subject.praise.against = _this.dataDetail.subject.praise.against + 1;
                _this.dataDetail.subject.praise.is_support = false;
              }
            } else {
              _this.$Message.destroy();
              _this.$Message.error('保存信息失败!');
            }
          });
        } else if (is_support == 'false' && is_support != '') {//已经反对 -> 取消反对
          _this.supportSave(tid, 'answer', '', true, function (res) {
            if (res.result == 0) {
              var key = 'answer_key_' + _this.type + '_' + tid;
              _this.data[key].subject.praise.against = _this.data[key].subject.praise.against - 1 >= 0 ? _this.data[key].subject.praise.against - 1 : 0;
              _this.data[key].subject.praise.is_support = '';
              if (_this.showCurrentTableData == true) {
                _this.dataDetail.subject.praise.against = _this.dataDetail.subject.praise.against - 1 >= 0 ? _this.dataDetail.subject.praise.against - 1 : 0;
                _this.dataDetail.subject.praise.is_support = '';
              }
            } else {
              _this.$Message.destroy();
              _this.$Message.error('保存信息失败!');
            }
          });
        } else if (is_support == '' && is_support != 'false' && is_support != 'true') {//未支持未反对 -> 反对
          _this.supportSave(tid, 'answer', false, false, function (res) {
            if (res.result == 0) {
              var key = 'answer_key_' + _this.type + '_' + tid;
              _this.data[key].subject.praise.against = _this.data[key].subject.praise.against + 1;
              _this.data[key].subject.praise.is_support = false;
              if (_this.showCurrentTableData == true) {
                _this.dataDetail.subject.praise.against = _this.dataDetail.subject.praise.against + 1;
                _this.dataDetail.subject.praise.is_support = false;
              }
            } else {
              _this.$Message.destroy();
              _this.$Message.error('保存信息失败!');
            }
          });
        }
      },
      // 支持反对保存
      supportSave: function (tid, type, is_support, is_cancel, _successFun) {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          tid: tid,
          type: type,
          is_support: is_support,//"true 支持 false 反对"
          is_cancel: is_cancel,//"true 取消支持或取消反对"
        };
        var params = {
          url: '/support/save',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
      },
      // 收藏
      collectionFun: function (tid, is_collection) {
        var _this = this;
        _this.list_tid = tid;
        _this.list_is_collection = is_collection;
        is_collection = is_collection.toString();
        if (is_collection == 'true') {//已经收藏 -> 取消收藏
          _this.get_collection_group();
        } else if (is_collection == 'false') {//未收藏 -> 加入收藏
          _this.get_collection_group();
        }
      },
      //收藏夹列表
      get_collection_group: function () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          tid: _this.list_tid,
          type: 'answer',
        };
        var params = {
          url: '/collection/group/listForTid',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            var Checkbox_collection_group = [];
            for (var k in _data) {
              if (!_data[k]) {
                continue;
              }
              if (_data[k].is_collection == 1) {
                Checkbox_collection_group.push(_data[k].id);
              }
            }
            _this.Checkbox_collection_group = Checkbox_collection_group;
            _this.collection_group_data = _data;
            _this.show_collection_modal = true;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询收藏夹信息失败!');
          }
        }
      },
      // 隐藏收藏夹
      hidecollectionModal: function () {
        var _this = this;
        _this.show_collection_modal = false;
      },
      // 保存收藏
      savecollection: function () {
        var _this = this;
        var Checkbox_collection_group = _this.Checkbox_collection_group;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          tid: _this.list_tid,
          type: 'answer',
          gids: Checkbox_collection_group,
        };
        var params = {
          url: '/collection/update',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var is_collection = false;
            if (Checkbox_collection_group.length > 0) {
              is_collection = true;
            }
            var key = 'answer_key_' + _this.type + '_' + _this.list_tid;
            _this.data[key].subject.collection.is_collection = is_collection;
            if (_this.showCurrentTableData == true) {
              _this.dataDetail.subject.collection.is_collection = is_collection;
            }
            _this.show_collection_modal = false;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('收藏失败!');
          }
        }
      },
      // 取消收藏
      del_collection: function () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          tid: _this.list_tid,
          type: 'answer',
        };
        var params = {
          url: '/collection/delete',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var key = 'answer_key_' + _this.type + '_' + _this.list_tid;
            _this.data[key].subject.collection.is_collection = false;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('取消收藏失败!');
          }
        }
      },
      // 评论
      commentsFun: function (id) {
        var _this = this;
        var key = 'answer_key_' + _this.type + '_' + id;
        if (_this.showCurrentTableData == true) {
          if (_this.dataDetail.show_comments_list) {
            _this.dataDetail.show_comments_list = false;
          } else {
            _this.dataDetail.show_comments_list = true;
          }
        } else {
          if (_this.data[key].show_comments_list) {
            _this.data[key].show_comments_list = false;
          } else {
            _this.data[key].show_comments_list = true;
          }
        }
      },
      // 详情
      showDetail: function (id) {
        var _this = this;
        _this.id = id;
        var data = {
          id: _this.id,
          knowledge_id: _this.type_id,
        };
        var params = {
          url: '/intell-lib/answer/query',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _data.show_comments_list = false;
            _this.dataDetail = _data;
            _this.showCurrentTableData = true;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询信息失败!');
          }
        }
      },
      asyncOK: function () {
        var _this = this;
        _this.showCurrentTableData = false;
      },
    },
  };
</script>
